/**
 *@author：yanghx
 *@Date: 2020/2/8 21:49
 */
import React from 'react';
import {Text, View} from 'react-native';
import {Icon, TabBar} from '@ant-design/react-native';
import TabBarHomePage from '@page/tabbar/component/tabbarHome/TabBarHomePage';
import TabBarListPage from '@page/tabbar/component/tabbarList/TabBarListPage';
import TabBarUserCenterPage from '@page/tabbar/component/userCenter/TabBarUserCenterPage';

export default class TabBarPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'redTab',
    };
  }

  renderContent(pageText) {
    return (
      <View style={{flex: 1, alignItems: 'center', backgroundColor: 'white'}}>
        <Text style={{margin: 50}}>{pageText}</Text>
      </View>
    );
  }

  onChangeTab(tabName) {
    this.setState({
      selectedTab: tabName,
    });
  }

  render() {
    return (
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#33A3F4"
        barTintColor="#f5f5f5">
        <TabBar.Item
          title="Life"
          icon={<Icon name="home"/>}
          selected={this.state.selectedTab === 'blueTab'}
          onPress={() => this.onChangeTab('blueTab')}>
          <TabBarHomePage/>
        </TabBar.Item>
        <TabBar.Item
          icon={<Icon name="ordered-list"/>}
          title="Koubei"
          selected={this.state.selectedTab === 'redTab'}
          onPress={() => this.onChangeTab('redTab')}>
          <TabBarListPage/>
        </TabBar.Item>
        <TabBar.Item
          icon={<Icon name="user"/>}
          title="My"
          selected={this.state.selectedTab === 'yellowTab'}
          onPress={() => this.onChangeTab('yellowTab')}>
          <TabBarUserCenterPage/>
        </TabBar.Item>
      </TabBar>
    );
  }
}
